---
id: unit1
title: 安装
---

import GitalkComponent from "gitalk/dist/gitalk-component";


<details >
  <summary>点击查看安装命令</summary>

使用你喜欢的工具进行安装

```mdx-code-block
<Tabs>
<TabItem value="npm">
```

```bash
npm i typescript -g
```

```mdx-code-block
</TabItem>
<TabItem value="yarn">
```

```bash
yarn add typescript -g
```

```mdx-code-block
</TabItem>
<TabItem value="pnpm">
```

```bash
pnpm i typescript -g
```

```mdx-code-block
</TabItem>
</Tabs>
```

</details>

### 动动手

1. 新建个叫做 ts 的文件夹（后面的内容都是在这个文件夹里操作）。
2. 在文件夹里再新建一个 demo.ts 的文件。
3. 命令行进入 ts 的文件夹，输入 ** tsc --init **  生成 ts 配置文件。
4. 把下面这项内容粘贴到 demo.ts 内。

```ts
let str: string = "abc"; // 声明一个str变量，类型是string

let num: number = 123; // 声明一个num变量，类型是number

function fn(): string { // 这个函数的返回值是string
  return "a";
}

console.log(fn());
```

5. 命令行进入 ts 文件夹：输入 tsc demo.ts。会对 demo.ts 进行编译，编译好的文件放在同级目录下同名的 .js 文件。

上方那段代码的编译内容如下  
可以使用 node demo.js 命令 验证是否可运行。

```js
var str = "abc";
var num = 123;
function fn() {
  return "a";
}
console.log(fn());
```

:::tip
ts 的静态类型只存在于编译前，编译后生成的还是 js
:::

### 自动编译

我们每改动一次 demo.ts 就需要执行一次 tsc demo.ts 来生成对应的 js。感觉很不爽。

我们可以执行自动编译的命令来解决这个问题

```bash
tsc demo.ts --watch
```
<!-- 
<GitalkComponent
  options={{
     clientID: '1c3fe7df09d4b16cf64a',
  clientSecret: 'a5db2607d83704b1e8acdb64228d9f2e476592dd',
  repo: 'comment',
  owner: 'dbstao',
  admin: ['dbstao'],
  id: 'ts/unit1',
  labels: 'ts',
  }}
/> -->
